<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible.sync="visible"
    title="医嘱计划"
    width="650px"
  >
    <div class="search">
      <el-input
        v-model="form.treatmentNameOrRef"
        @keyup.enter.native="searchBtn"
        placeholder="治疗项目/拼音代码"
        clearable
      />
      <el-button type="primary" @click="searchBtn" style="margin-left: 5px"
        >查询</el-button
      >
    </div>
    <el-table
      ref="table"
      v-loading="tableLoading"
      :data="tableList"
      row-key="planId"
      @selection-change="selectionChangeHandler"
      style="width: 100%;"
      :header-cell-style="{ background: '#c8e2ff' }"
      cell-class-name="cell-bg-color"
    >
      <el-table-column label="序号" width="60px" prop="indexNumber">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="patientName" />
      <el-table-column
        label="治疗项目"
        prop="treatmentName"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="单次数量" prop="singleNum" />
      <el-table-column label="单位" prop="dicItemUnitName" />
      <el-table-column label="计划时间" prop="planTime">
        <template slot-scope="scope">
          {{ getTime(scope.row.planTime) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="planStates">
        <template slot-scope="scope">
          {{
            scope.row.planStates == 0
              ? "未提取"
              : scope.row.planStates == 1
              ? "已提取"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
        :selectable="selectable"
      />
    </el-table>
    <el-pagination
      :page-size.sync="page.size"
      :page-sizes="[10, 20, 30, 50]"
      :total="page.total"
      :current-page.sync="page.page"
      style="margin-top: 8px"
      layout="total, prev, pager, next, sizes, jumper"
      @size-change="sizeChangeHandler($event)"
      @current-change="pageChangeHandler"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="submitClick"
        >确认</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import * as ajax from "@/api/treatmentProject/app.js";
import moment from "moment";
export default {
  name: "medicalOrderPlan",
  data() {
    return {
      visible: false,
      tableLoading: false,
      tableList: [],
      form: { treatmentNameOrRef: "" },
      selectedRowKeys: [],
      page: {
        // 页码
        page: 1,
        // 每页数据条数
        size: 10,
        // 总数据条数
        total: 0,
      },
      loading: false,
      checkList: [],
      str: "",
    };
  },
  mounted() {},
  methods: {
    selectable(row) {
      if (row.planStates == 1) {
        return false; // 禁用
      } else {
        return true; //不禁用
      }
    },
    showModal(checkList, name, str) {
      this.checkList = checkList;
      this.visible = true;
      this.str = str;
      if (str) {
        this.form.treatmentNameOrRef = name;
      }
      this.getList();
    },
    submitClick() {
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        this.loading = true;
        ajax
          .allReservation({
            planIdList: this.selectedRowKeys.map((item) => {
              return item.planId;
            }),
          })
          .then((res) => {
            this.$emit("search");
            this.cancel();
            this.$notify({
              title: "预约成功",
              type: "success",
              duration: 2500,
            });
            this.loading = false;
          })
          .catch((res) => {
            this.loading = false;
            this.$notify({
              title: res.msg,
              type: "error",
              duration: 2500,
            });
          });
      } else {
        this.$notify({
          title: "请选择治疗项目",
          type: "warning",
          duration: 2500,
        });
      }
    },
    cancel() {
      this.visible = false;
      this.form.treatmentNameOrRef = "";
      this.page.page = 1;
      this.page.size = 10;
      this.$refs.table.clearSelection();
    },
    selectionChangeHandler(val) {
      this.selectedRowKeys = val;
    },
    getTime(val) {
      return val ? moment(val).format("YYYY-MM-DD HH:mm") : "";
    },
    getList() {
      this.tableLoading = true;
      ajax
        .planReservation({
          patientIdStr: this.checkList
            .map((item) => {
              return item.patientId;
            })
            .join(","),
          treatmentNameOrRef: this.form.treatmentNameOrRef,
          todayFlag: this.str ? 0 : 1,
          page: this.page.page,
          size: this.page.size,
        })
        .then((res) => {
          this.tableLoading = false;
          this.tableList = res.content;
          this.page.total = res.totalElements;
        })
        .catch((res) => {
          this.tableLoading = false;
          this.$notify({
            title: res.msg,
            type: "error",
            duration: 2500,
          });
        });
    },
    searchBtn() {
      this.page.page = 1;
      this.getList();
    },
    // 当前页改变
    pageChangeHandler(e) {
      this.page.page = e;
      this.getList();
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.page.size = e;
      this.page.page = 1;
      this.getList();
    },
  },
};
</script>

<style lang='scss' scoped>
/deep/.el-table__row{
  background-color:#eaf4ff
}
.search {
  display: flex;
  margin-bottom: 20px;
}
</style>